<template>
	<view class="page">
		<image src="../../static/img/house/ok.png" class="ok" mode="widthFix">
			<view class="top"> <span>添加成功</span>
				<p>查看小区行情解读 <i></i></p>
			</view>
			<view class="main">

				<view class="msg">继续完善房屋信息，即可查看我家估价</view>

				<view class="box">
					<view class="red">*</view>
					<view class="name">房屋总价</view>
					<input type="number" v-model="form.totalPrice" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">万</view>
				</view>

				<view class="box">
					<view class="red red_no"></view>
					<view class="name">售<i></i>底<i></i>价</view>
					<input type="number" v-model="form.basePrice" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">万</view>
				</view>

				<view class="box">
					<view class="red red_no"></view>
					<view class="name">您的称呼</view>
					<input type="text" v-model="form.ownerName" placeholder="请输入" class="input input_call"
						placeholder-class="input_placeholder">
					<view class="call"><i :class="call_name=='先生'?'active':''" @click="_call('先生')">先生</i><i
							:class="call_name=='女士'?'active':''" @click="_call('女士')">女士</i></view>
				</view>

				<view class="box">
					<view class="red">*</view>
					<view class="name">联系方式</view>
					<input type="number" v-model="form.ownerPhone" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
				</view>



				<view class="tag">
					<p>额外面积</p>
					<span :class="form.otherArea=='有'?'active':''" @click="_otherArea('有')">有</span>
					<span :class="form.otherArea=='无'?'active':''" @click="_otherArea('无')">无</span>
					<span :class="form.otherArea=='不清楚'?'active':''" @click="_otherArea('不清楚')">不清楚</span>
				</view>

				<view class="box box_half" v-if="form.otherArea=='有'">
					<view class="name">花园面积</view>
					<input type="number" v-model="form.gardenArea" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>

				<view class="box box_half box_half_right" v-if="form.otherArea=='有'">
					<view class="name">阁楼面积</view>
					<input type="number" v-model="form.atticArea" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>

				<view class="box box_half" v-if="form.otherArea=='有'">
					<view class="name">露台面积</view>
					<input type="number" v-model="form.balconyArea" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>

				<view class="box box_half box_half_right" v-if="form.otherArea=='有'">
					<view class="name">地下室面积</view>
					<input type="number" v-model="form.basementArea" placeholder="请输入" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>

			</view>

			<view class="footer_hr"></view>
			<view class="footer" @click="_save()">
				<p>一键提交</p>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityIndex: undefined,
				cityList: [
					['请选择几室', 0, 1, 2, 3, 4, 5, 6],
					['请选择几厅', 0, 1, 2, 3, 4, 5, 6],
					['请选择几卫', 0, 1, 2, 3, 4, 5, 6],
				],
				"call_name": '先生',
				form: {
					// "srid": undefined, //所在小区id
					// "sbid": undefined, //所属楼栋
					"floor": 0,



					"room": "", //室
					"hall": "", //厅
					"toilet": "", //卫
					"kitchen": 1, //厨
					"balcony": 1, //阳台

					"square": '', //房屋面积
					// "builtName": '', //楼栋名称
					"roomNo": '', //门牌号
					"deliveryStandard": '', //装修类型

					"gardenArea": '', //花园面积
					"atticArea": '', //阁楼面积
					"balconyArea": '', //露台面积
					"basementArea": '', //地下室面积


					"totalPrice": '', //房屋总价
					"basePrice": '', //底价
					"ownerName": '', //姓名
					"gender": 0, //称呼
					"ownerPhone": '', //联系方式,
					"otherArea": '', //有无额外面积   有 无 不知道

				}

			}
		},
		onLoad(e) {
			let that = this;
			if (e.srid != "undefined") {
				that.form.srid = parseInt(e.srid)
			} else {
				that.form.buildName = e.buildName
			}

			if (e.sbid != "undefined") {
				that.form.sbid = parseInt(e.sbid)
			} else {
				that.form.builtName = e.builtName
				that.form.unit = e.unit
			}



			that.form.roomNo = e.roomNo
			that.form.square = e.square
			that.form.room = e.room
			that.form.hall = e.hall
			that.form.toilet = e.toilet
			that.form.deliveryStandard = e.deliveryStandard

		},
		methods: {
			//切换称呼
			_call(e) {
				this.call_name = e
				if (e == '先生') {
					this.form.gender = 0
				} else {
					this.form.gender = 1
				}
			},
			//保存
			_save() {

				if (!this.form.totalPrice) {
					uni.showToast({
						title: "请输入房屋总价",
						icon: 'none'
					})
					return
				}

				if (!this.form.ownerPhone) {
					uni.showToast({
						title: "联系方式",
						icon: 'none'
					})
					return
				}


				this.form.basementArea = parseFloat(this.form.basementArea)
				this.form.balconyArea = parseFloat(this.form.balconyArea)
				this.form.atticArea = parseFloat(this.form.atticArea)
				this.form.gardenArea = parseFloat(this.form.gardenArea)
				this.form.square = parseFloat(this.form.square)
				this.form.deliveryStandard = decodeURIComponent(this.form.deliveryStandard)

				let that = this
				// console.log(that.form);
				// return
				that.api.post('cbsrpc/add', that.form).then(res => {
					console.log(res);
					let temp = JSON.parse(res)
					if (temp) {
						uni.showToast({
							title: "提交成功",
							icon: 'none'
						})
						setTimeout(function() {
							// that._navigateTo('/pages/house/server?srid=' + that.form.srid)
						}, 1500)
					}
				})

			},
			// 有无额外面积
			_otherArea(e) {
				this.form.otherArea = e
				if (e != '有') {
					this.form.gardenArea = ""
					this.form.atticArea = ""
					this.form.balconyArea = ""
					this.form.basementArea = ""
				}
			},

			// 下拉选择
			bindCityChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.cityIndex = e.target.value
				if (this.cityList[0][this.cityIndex[0]] != '请选择几室') {
					this.form.room = this.cityList[0][this.cityIndex[0]]
				} else {
					this.form.room = 0
				}

				if (this.cityList[1][this.cityIndex[1]] != '请选择几厅') {
					this.form.hall = this.cityList[1][this.cityIndex[1]]
				} else {
					this.form.hall = 0
				}

				if (this.cityList[2][this.cityIndex[2]] != '请选择几卫') {
					this.form.toilet = this.cityList[2][this.cityIndex[2]]
				} else {
					this.form.toilet = 0
				}


				console.log(this.form);
			},


			// 选择户型信息
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},

			// 跳页
			_navigateTo(e) {
				uni.navigateTo({
					url: e
				});
			},

		}
	}
</script>

<style>
	.footer_hr {
		width: 100%;
		height: 180rpx;
		display: block;
		float: left;
	}

	.footer {
		width: 100%;
		height: 156rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(255, 131, 14, 0.2);
		opacity: 1;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.footer p {
		width: 686rpx;
		height: 100rpx;
		background: #FE5700;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		margin: 12rpx 0 0 32rpx;
		;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}



	.call {
		width: 156rpx;
		height: 52rpx;
		background: #F3F5F7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		display: block;
		float: right;
		margin: -8rpx 0 -17rpx 0;
	}

	.call i {
		width: 74rpx;
		height: 44rpx;
		background: #F3F5F7;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		opacity: 1;
		display: block;
		float: left;
		margin: 4rpx 0 0 4rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #919191;
		line-height: 44rpx;
		text-align: center;
	}

	.call i.active {
		font-weight: bold;
		color: #FFFFFF;
		background: #FE5700;
	}

	.tag {
		width: 662rpx;
		padding: 0 0 0;
		height: auto;
		display: block;
		float: left;
		margin: 32rpx 0 0 24rpx;
	}

	.tag p {
		width: 100%;
		padding: 0 0 0;
		height: auto;
		display: block;
		float: left;
		margin: 0 0 16rpx 0;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
	}

	.tag span {
		width: auto;
		height: 80rpx;
		background: #F6F6F6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		padding: 0 53rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 80rpx;
		margin: 0 16rpx 16rpx 0;
		display: block;
		float: left;
		min-width: 98rpx;
		text-align: center;
	}

	.tag span.active {
		background: rgba(254, 87, 0, 0.05);
		color: #FE5700;
		font-weight: bold;
	}




	.box {
		width: 638rpx;
		padding: 0 0 32rpx;
		height: auto;
		display: block;
		float: left;
		margin: 32rpx 24rpx 0;
		border-bottom: 1rpx solid rgba(190, 190, 190, 0.5);
	}

	.name {
		width: 180rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
	}
	.name i{
		width: 15rpx;
		height: 10rpx;
		display: inline-block;
		
	}
	.span {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
	}

	.input {
		width: 400rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
		line-height: 40rpx;
		display: block;
		float: left;
	}

	.input_call {
		width: 300rpx;
	}

	.unit {
		width: 38rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: right;
	}

	.input_placeholder {
		color: #BEBEBE;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
	}

	.ico {
		width: 10rpx;
		height: 16rpx;
		display: inline-block;
		float: right;
		margin: 15rpx 0 0 12rpx;
		background: url(../../static/img/house/okright.png) no-repeat;
		background-size: 100%;
	}

	.clearh {
		width: 100%;
		height: 1rpx;
		display: block;
		float: left;
		margin: 0 0 25rpx;
	}

	.input_layout_left {
		width: 210rpx;
		margin-right: 20rpx;
	}

	.input_layout_right {
		width: 190rpx;
		margin: 0 20rpx 0 80rpx;
	}

	.bt {
		width: 638rpx;
		height: 88rpx;
		background: #FE5700;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: block;
		float: left;
		margin: 32rpx 24rpx;
	}

	.red {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FF0000;
		line-height: 40rpx;
		display: block;
		float: left;
		margin: 0 0 0 -14rpx;
	}

	.box_half {
		width: 278rpx;
	}

	.box_half .input {
		width: 230rpx;
	}

	.msg {
		width: 638rpx;
		height: 76rpx;
		background: rgba(254, 87, 0, 0.05);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #FE5700;
		text-align: left;
		box-sizing: border-box;
		padding: 0 18rpx 0;
		line-height: 76rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		display: block;
		float: left;
		margin: 34rpx 0 6rpx 24rpx;
	}

	.box_half .name {
		margin-bottom: 28rpx;
	}

	.main {
		width: 686rpx;
		height: auto;
		display: block;
		float: left;
		margin: 0 32rpx 146rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding-bottom: 32rpx;
	}

	.box_half_right {
		float: right;
	}

	page {
		background-color: #F6F6F6;
	}

	.ok {
		width: 116rpx;
		height: 116rpx;
		display: block;
		float: left;
		margin: 20rpx 0 18rpx 318rpx;
	}

	.top {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		text-align: center;
	}

	.top span {
		width: 100%;
		display: block;
		float: left;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin: 0 0;
	}

	.top p {
		width: 100%;
		display: block;
		float: left;
		height: 36rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		line-height: 36rpx;
		color: #FE5700;
		margin: 10rpx 0 46rpx;
	}


	.top i {
		width: 10rpx;
		height: 16rpx;
		display: inline-block;
		margin: 15rpx 0 0 12rpx;
		background: url(../../static/img/house/yellow.png) no-repeat;
		background-size: 100%;
	}
</style>